<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-input v-model= "pname" placeholder="请输入群组名称" suffix-icon="search" style="width: 200px"/>
      <el-button id="11" type="primary" style="margin-left: 10px" @click = "search">查询</el-button>
      <el-button id="12" type="success" @click = "reset">重置</el-button>
      <el-button id="13" type="primary" style="margin-left: 10px" @click = "add">新增</el-button>
    </div>
    <el-scrollbar>
      <el-table :data="tableData">
        <el-table-column type="index" width="200px" label="序号"/>
        <el-table-column prop="kind" label="群组名称"/>
        <el-table-column prop="operate" label="操作">
          <template #default="scope">
            <el-button size="small" type="success" @click="lock(scope.row)">查看答者</el-button>
            <el-button size="small" type="warning" @click="mod(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="dele(scope.row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </el-scrollbar>
    <el-dialog v-model="centerDialogVisible" title="新增/修改" width="30%" center>

      <el-form :model="form" label-width="120px" :rules="rules" ref = "form">
        <el-form-item label="群组名称" prop="name">
          <el-col span="20">
            <el-input v-model="form.name" />
          </el-col>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click=quxiao>取消</el-button>
        <el-button type="primary" @click="addSave">确认</el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog v-model="Visible" title="查看答者" width="60%" center>
      <el-scrollbar>
        <el-table :data="tableData2">
          <el-table-column type="index" width="100px" label="序号"/>
          <el-table-column prop="answerName" label="名称"/>
          <el-table-column prop="phone" label="电话"/>
          <el-table-column prop="age" label="年龄"/>
          <el-table-column prop="gender" label="性别"/>
          <el-table-column prop="address" label="地址"/>
          <el-table-column prop="operate" label="操作">
            <template #default="scope">
              <el-button size="small" type="danger" @click="deleAnswer(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" style="margin-top: 20px" @click="addAnswer">新增答者</el-button>
      </span>
      </template>
    </el-dialog>


    <el-dialog v-model="Visible1" title="添加答者" width="30%" center>
      <div style="display: inline-block" align="center">
        <p style="margin-left: 10px">请选择答者</p>
        <div align="center">
          <el-select
              v-model="value1"
              placeholder="Select"
              style="width: 400px"
          >
            <el-option
                v-for="item in options"
                :key="item.answerName"
                :label="item.answerName"
                :value="item.answerName"
            />
          </el-select>
        </div>

      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="addback">取消</el-button>
        <el-button type="primary" @click="addsure">确认</el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import {ElMessage} from "element-plus";
import router from "@/router";
import request from "@/util/request";
export default {

  name: "GroupManage",
  data () {
    let checkOneName = (rule, value, callback)=>{
      if (this.form.check == '1'){
        console.log('call')
        callback()
      }

      let formData = new FormData();
      formData.append("kind",this.form.name);
      formData.append("uid",this.getValue().uid);
      this.$axios.post("http://localhost:8090/cluster/findCluster",formData).then(res=>res.data).then(res =>{
        if (res.data.length == 0) {
          callback()
        }else {
          callback(new Error('此群组已存在'))
        }
      });
    }
    return {
      tableData: [],
      tableData2: [],
      options:[],
      value1:[],
      pname:'',
      Visible:false,
      Visible1:false,
      centerDialogVisible : false,
      form:{
        name:'',
        uid:'',
        check:'',
        cid:''
      },
      rules:{
        name : [
          {required:true, message:'请输入名字',trigger:'blur'},
          {min:1, max:8, message: '请输入长度3-8字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods:  {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    search(){
      document.getElementById("11").blur();
      this.loadPost()
    },
    getValue() {
      let value1 = this.$cookies.get('value')
      return value1
    },
    getback () {
      this.Visible=false;
    },
    addback() {
      this.Visible1=false
      this.lock(this.$cookies.get('row'))
    },
    addsure() {
      this.Visible1=false
      let row = this.$cookies.get('row')
      this.$axios.post("http://localhost:8090/cluster/addAnswer_Cluster",{
        answerName:this.value1,
        cid:row.cid
      }).then(res=>res.data).then(res =>{
        if (res.code == '200') {
          ElMessage({
            message: '操作成功！',
            type: 'success',
          })
        }else {
          ElMessage({
            message: '操作失败！',
            type: 'error',
          })
        }
        this.lock(row)
      });

    },
    addAnswer() {
      this.Visible=false;
      this.Visible1=true;
      this.$axios.post("http://localhost:8090/answer/findAnswerByAnswerName",{
        answerName:''
      }).then(res=>res.data).then(res =>{
        this.options=res.data
        console.log(res)
        console.log(this.options)
      });
    },
    deleAnswer(low) {
      console.log(low)
      let self = this;
      this.$axios.post("http://localhost:8090/cluster/deleteAnswer_Cluster",{
        answerName:low.answerName,
        cid:self.$cookies.get('row').cid,
        aid:low.aid
      }).then(res=>res.data).then(res =>{
        if (res.code == '200') {
          ElMessage({
            message: '操作成功！',
            type: 'success',
          })

        }else {
          ElMessage({
            message: '操作失败！',
            type: 'error',
          })
        }
        self.lock(self.$cookies.get('row'))
      });
    },
    loadPost() {

        let formData = new FormData();
        formData.append("kind",this.pname);
        formData.append("uid",this.getValue().uid);
        this.$axios.post("http://localhost:8090/cluster/findCluster",formData).then(res=>res.data).then(res =>{
          this.tableData = res.data
          console.log(res)
        });
    },
    quxiao() {
      this.centerDialogVisible = false
    },
    reset() {
      document.getElementById("12").blur();
      this.pname = ''
    },
    add() {
      document.getElementById("13").blur();
      this.form.check = '2'
      this.centerDialogVisible = true
      this.resetForm('form')

    },
    addSave(){
      console.log(this.form)
      const kind = this.form.name
      this.$refs.form.validate(valid=>{
        if (valid) {
          if (this.form.check == '1') {
            console.log('进入')
            this.$axios.post("http://localhost:8090/cluster/updateCluster",{
                cid:this.form.cid,
                uid:this.form.uid,
                kind:kind
            }).then(res=>res.data).then(res =>{
              console.log(res)
              if (res.code == '200') {
                this.centerDialogVisible = false
                ElMessage({
                  message: '操作成功！',
                  type: 'success',
                  customClass: 'messageIndex'
                })
                this.loadPost()
              } else {
                ElMessage({
                  message: '操作失败！当前群组下有群组！',
                  type: 'error',
                  customClass: 'messageIndex'
                })
              }
            });
          }else {
            let formData = new FormData();
            console.log(this.form)
            let self=this
            formData.append("kind",kind);
            formData.append("uid",this.getValue().uid);
            this.$axios.post("http://localhost:8090/cluster/insertCluster",formData).then(res=>res.data).then(res =>{
              if (res.code == '200') {
                let fd = new FormData();
                fd.append('uid',self.getValue().uid)
                self.$axios.post("http://localhost:8090/tenant/updateClusterFee",fd).then(res=>res.data).then(res=>{
                  this.centerDialogVisible = false
                  ElMessage({
                    message: '操作成功！',
                    type: 'success',
                  })
                  this.loadPost()
                })
              } else {
                ElMessage({
                  message: '操作失败！此群组名已存在！',
                  type: 'error',
                })
              }
            });
          }
        }else {
          ElMessage({
            message: '请输入正确的数据！',
            type: 'error',
          })
        }
      })
    },
    mod (low) {
      this.form.name = low.kind
      this.form.check = '1'
      this.form.cid = low.cid
      this.form.uid = low.uid
      this.centerDialogVisible = true
    },
    lock(low) {
      this.Visible = true
      let cid = low.cid
      this.$cookies.set('row',low)
      this.$axios.post("http://localhost:8090/cluster/showAnswer_Cluster",{
        cid:cid
      }).then(res=>res.data).then(res =>{
        if(res.code == '200') {
          this.tableData2 = res.data
          console.log(this.tableData2)
        }

      });
    },
    dele(low){
      console.log(low)
      let formData = new FormData();
      formData.append("cid",low.cid);
      this.$axios.post("http://localhost:8090/cluster/deleteCluster",formData).then(res=>res.data).then(res =>{
        if(res.code == '200') {
          ElMessage({
            message: '操作成功！',
            type: 'success',
            customClass: 'messageIndex',
          })
          this.loadPost()
        }else {
          ElMessage({
            message: '操作失败！当前群组下有答者！！',
            customClass: 'messageIndex',
            type: 'error',
          })
        }
        console.log(res)
      });
    }
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.messageIndex {

  z-index: 9999 !important;

}
</style>